<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Tree Demos</title>
	<script type="text/javascript">
		var Global = {
			contextPath:'/bingo.ui.framework'
		} 
	</script>
	<script src="../../../../scripts/jquery.js" type="text/javascript"></script>
	<script src="../../../../scripts/jquery.utils.js" type="text/javascript"></script>
	
	<link  href="../../../../themes/default/ui.css" type="text/css" id="themesLink" rel="stylesheet" />
	
	<script src="../ui.tree.js" type="text/javascript"></script>
	<link  href="../ui.tree.css" rel="stylesheet" type="text/css" />

	<link type="text/css" href="../../../demos.css" rel="stylesheet" />
	<script src="../../../../scripts/jquery_plugins/jquery.json.js" type="text/javascript"></script>
	<!-- 换肤 -->
	<script type="text/javascript" src="../../../theme_cookie.js"></script>
	<style>
		.tree{
			width:200px;
		}
		
		button{
			width:150px;
			font-size: 80%;
		}
		
		.ns{
			font-size:80%;
		}
	</style>

	<script>
		$(function(){
			var data = {
				id:'11',
				text:'根节点',
				isExpand:true,
				childNodes:[
					{
						id:'21',
						text:'数据源表11',
						showCheck:true, //默认为true
						childNodes:[
							{
								id:'ss',
								text:'搜索',
								disabled:true,
								childNodes:[
									{
										id:'baidu',
										disabled:true,
										text:'百度'
									},
									{
										id:'google',
										text:'谷歌'
									}
								]
							}
						]
					},
					{
						id:'31',
						text:'数据源表二1',
						complete:false //表示需要异步加载
					}
				]
			 };

			var rootPath = window.location.href.substring(0,window.location.href.lastIndexOf("\/") + 1);
			
			$('#event-tree').tree({//tree为容器ID
            	method		:	'post',
            	asyn		:	true, //异步
            	url			:	rootPath + 'data.html',
            	dataProxy	:	{type:'data',value:data}//获取数据方式
            }) ;

            $('.getCurrentNode').click( function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
				$('.value').html('当前节点：<br/>'+ $.json.encode( vals ) ) ;
            } ) ;

            $('.expandAll').click( function(){
            	var vals = $('#event-tree').tree().expandAll()  ;
            } ) ;

            $('.expandAllPos').click( function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要收缩的节点，再点击收缩指定节点按钮。');
            	}else{
            		var vals = $('#event-tree').tree().expandAll(vals.id)  ;
            	}
            } ) ;

            $('.expandLevel2').click( function(){
            	var vals = $('#event-tree').tree().expandLevel(null ,2)  ;
            } ) ;

            $('.collapseNode').click( function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要收缩的节点，再点击收缩指定节点按钮。');
            	}else{
            		var vals = $('#event-tree').tree().collapse(vals.id)  ;
            	}
            }) ;

          
            $('.deleteNode').click(function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要删除的节点，再点击删除节点按钮。');
            	}else{
            		$('#event-tree').tree().deleteNode(vals.id) ;	
            	}
            }) ;

            $('.updateNode').click(function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要修改的节点，再点击修改节点按钮。');
            	}else{
            		$('#event-tree').tree().updateNode( {id:vals.id,text:'已经修改'}) ;	
            	}
            	
            }) ;

            var id = 21001 ;
            $('.addNode').click(function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要添加的节点，再点击添加节点按钮。');
            	}else{
            		$('#event-tree').tree().addNode( {id:(id+1)+"",text:'动态添加',parentId:vals.id}) ;	
            	}
            }) ;
            
             $('.checkNode').click(function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要勾选的节点，再点击勾选节点按钮。');
            	}else{
            		$('#event-tree').tree().checkNode(vals.id,true) ;	
            	}
            }) ;
            
            $('.unCheckNode').click(function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要勾掉的节点，再点击勾掉节点按钮。');
            	}else{
            		$('#event-tree').tree().checkNode(vals.id,false) ;	
            	}
            }) ;

		}) ;
	</script>
	
</head>

<body>
   <div style="float:left;width:200px;">
	<hr/>
	<button class='getCurrentNode'>获取当前选中节点对象</button><br/>
	<button class='expandAll'>展开所有节点</button><br/>
	<button class='expandAllPos'>展开指定节点</button><br/>
	<button class='expandLevel2'>展开第二级节点</button><br/>
	<button class='collapseNode'>收缩指定节点</button><br/>
	<button class='deleteNode'>删除节点</button><br/>
	<button class='updateNode'>修改节点</button><br/>
	<button class='addNode'>添加节点</button><br/>
	<br>
   </div>
	
	<div id='content-event' class='demo' style="float:left">
		
		<div id="event-tree" class="tree"></div>
		<br />
		<div class="ui-state-highlight value" style="width:300px;"></div>
		
	</div>
</body>
</html>